<template>
	<gui-page ref="guipage" :customFooter="isHideTabbar" :refresh="true" @reload="reload(true)">
		<template v-slot:gBody>
			<gui-a-header title="个人中心" :isShowPlace="false" bg="transparent"></gui-a-header>
			<view class="header">
				<image aria-hidden="true" class="head-bg" src="../../static/mine/mineBg.png" mode="aspectFill"></image>
				<view :style="{'height':navHeight+'px'}"></view>
				<view class="header-con z-index1">
					<view class="head-img flex-ac" v-if="isHideTabbar">
						<view class="headerImg">
							<gui-image :src="userInfo.logo" :width="144" :height="144"
								borderRadius="144rpx" mode="aspectFill"></gui-image>
							<!-- <image class="sex" src="../../static/mine/female.png" mode="widthFix"></image> -->
						</view>
						<view class="info flex-dc cfff">
							<text class="f36">{{userInfo.companyName}}</text>
							<text class="location f22">工作位置：{{userInfo.workAddress}}</text>
						</view>
					</view>
					<view class="head-img flex-ac" v-if="!isHideTabbar" @click="goLogin">
						<view class="headerImg">
							<gui-image :src="userInfo.avatarUrl" :width="144" :height="144"
								borderRadius="144rpx" mode="aspectFill"></gui-image>
							<!-- <image class="sex" src="../../static/mine/female.png" mode="widthFix"></image> -->
						</view>
						<view class="info flex-dc cfff">
							<text class="f36"> {{(isLogin) ? userInfo.nickName : '请先登录'}} </text>
							<text class="location f22" v-if="addressInfo.city">当前位置：{{addressInfo.city}}-{{addressInfo.district}}</text>
							<text class="location f22" v-else>当前位置：--</text>
						</view>
					</view>
					<view class="num-box cfff flex-ac-jb" v-if="!isHideTabbar">
						<view class="item flex1 flex-dc-ac" @click="$u.to(`/pages/mine/mine-delivery`)">
							<text class="f36">{{userNumInfo.tdNum}}</text>
							<text class="f24">我的投递</text>
						</view>
						<view class="item flex1 flex-dc-ac" @click="$u.to(`/pages/post/post-concern`)">
							<text class="f36">{{userNumInfo.gzNum}}</text>
							<text class="f24">关注岗位</text>
						</view>
						<view class="item flex1 flex-dc-ac" @tap="$u.to('/pages/mine/company-collect')">
							<text class="f36">{{userNumInfo.scNum}}</text>
							<text class="f24">收藏公司</text>
						</view>
					</view>
					<view class="num-box cfff flex-ac-jb" v-if="isHideTabbar">
						<view class="item flex1 flex-dc-ac" @tap="$u.to(`/pages/firm/position-list`)">
							<text class="f36">{{companyInfo.zpNum}}</text>
							<text class="f24">招聘岗位</text>
						</view>
						<view class="item flex1 flex-dc-ac" @tap="$u.to(`/pages/mine/deliver-list`)">
							<text class="f36">{{companyInfo.gzNum}}</text>
							<text class="f24">关注人才</text>
						</view>
						<view class="item flex1 flex-dc-ac" @tap="$u.to('/packageA/pages/talent-delivery')">
							<text class="f36">{{companyInfo.tdNum}}</text>
							<text class="f24">人才投递</text>
						</view>
					</view>
					<view class="head-tool-box bgfff flex-ac-jb" v-if="!isHideTabbar">
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="在线简历" @tap="$u.to(`/pages/mine/curriculumVitae/curriculum-vitae`)">
							<image src="../../static/mine/head_tool1.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">在线简历</text>
						</view>
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="热门招聘" @click="$u.to(`/pages/post/post-list?type=hot`)">
							<image src="../../static/mine/head_tool2.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">热门招聘</text>
						</view>
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="附近招聘" @click="$u.to(`/pages/post/post-list?type=area`)">
							<image src="../../static/mine/head_tool3.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">附近招聘</text>
						</view>
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="我的招聘会" @click="$u.to(`/pages/recruit/recruit-list?type=my`)">
							<image src="../../static/mine/head_tool4.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">我的招聘会</text>
						</view>
					</view>
					<view class="head-tool-box bgfff flex-ac-jb" v-if="isHideTabbar">
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="政策解读" @tap="$u.to(`/pages/index/policy/index`)">
							<image src="../../static/mine/zcjd.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">政策解读</text>
						</view>
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="热门人才" @click="$u.to(`/pages/recruit/deliver-list?type=hot`)">
							<image src="../../static/mine/rmrc.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">热门人才</text>
						</view>
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="附近人才" @click="$u.to(`/pages/recruit/deliver-list?type=area`)">
							<image src="../../static/mine/head_tool3.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">附近人才</text>
						</view>
						<view class="item flex1 flex-dc-ac" aria-role="button" aria-label="岗位发布" @click="$u.to(`/pages/firm/post-send`)">
							<image src="../../static/mine/head_tool4.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">岗位发布</text>
						</view>
					</view>
				</view>
			</view>
			<view class="seavice bgfff">
				<view class="title f32">我的服务</view>
				<view class="tool flex-ac-row" v-if="!isHideTabbar">
					<view class="item flex-dc-ac" aria-role="button" aria-label="我的资料" @tap="$u.to('/pages/mine/userinfo', 'navigateTo', true)">
						<image src="../../static/mine/tool1.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">我的资料</text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="xf_warp" open-type="contact">
						<view class="item flex-dc-ac" aria-role="button" aria-label="我的客服">
							<image src="../../static/mine/tool2.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">我的客服</text>
						</view>
					</button>
					<!-- #endif -->
					<view class="item flex-dc-ac" aria-role="button" aria-label="通知反馈" @tap="$u.to('/pages/mine/notic-feedback', 'navigateTo', true)">
						<image src="../../static/mine/tool3.png" mode="heightFix" style="width: auto;"></image>
						<text class="gui-badge demo-badge gui-bg-red gui-color-white" v-if="userTzNum > 0">{{userTzNum}}</text>
						<text class="f22 c666">通知反馈</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="关于我们" @tap="$u.to('/pages/mine/about-us')">
						<image src="../../static/mine/tool4.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">关于我们</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="建议投诉" @tap="$u.to('/pages/mine/feedback', 'navigateTo', true)">
						<image src="../../static/mine/tool5.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">建议投诉</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="系统设置" @tap="$u.to('/pages/mine/system-setting')">
						<image src="../../static/mine/tool6.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">系统设置</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="退出登录" @click="logout">
						<image src="../../static/mine/tool7.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">退出登录</text>
					</view>
				</view>
				<view class="tool flex-ac-row" v-if="isHideTabbar">
					<view class="item flex-dc-ac" aria-role="button" aria-label="企业资料" @tap="$u.to(`/pages/mine/company-collect-detail`)">
						<image src="../../static/mine/tool1.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">企业资料</text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="xf_warp" open-type="contact">
						<view class="item flex-dc-ac" aria-role="button" aria-label="我的客服">
							<image src="../../static/mine/tool2.png" mode="heightFix" style="width: auto;"></image>
							<text class="f22 c666">我的客服</text>
						</view>
					</button>
					<!-- #endif -->
					<view class="item flex-dc-ac" aria-role="button" aria-label="爱心助残" @tap="$u.to(`/pages/index/help`, 'navigateTo', true)">
						<image src="../../static/mine/axzc.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">爱心助残</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="保障金年审" @tap="$u.to('/pages/index/security-deposit/security-deposit')">
						<image src="../../static/mine/bzjsh.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">保障金年审</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="关于我们" @tap="$u.to('/pages/mine/about-us')">
						<image src="../../static/mine/tool4.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">关于我们</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="系统设置" @tap="$u.to('/pages/mine/system-setting')">
						<image src="../../static/mine/tool6.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">系统设置</text>
					</view>
					<view class="item flex-dc-ac" aria-role="button" aria-label="退出登录" @click="logout">
						<image src="../../static/mine/tool7.png" mode="heightFix" style="width: auto;"></image>
						<text class="f22 c666">退出登录</text>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:gFooter>
			<!-- 普通模式 -->
			<gui-flex :customClass="['gui-footer', 'gui-footer-border', 'bgfff']" direction="row" :wrap="false"
				alignItems="center" justifyContent="center">
				<view class="gui-footer-icon-buttons" @tap="navChange(0)">
					<image class="tab_icon" v-if="tabIndex != 0" src="@/static/tabbar/index.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 0" src="@/static/tabbar/index_select.png" mode="widthFix"></image>
					<text :class="[
								tabIndex == 0 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">首页</text>
				</view>
				<view class="gui-footer-icon-buttons" @tap="navChange(1)">
					<image class="tab_icon" v-if="tabIndex != 1" src="@/static/tabbar/talents.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 1" src="@/static/tabbar/talents_select.png" mode="widthFix"></image>
					<text :class="[
								tabIndex == 1 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">人才</text>
				</view>
				<view class="gui-footer-icon-buttons" @tap="navChange(2)">
					<image class="tab_icon" v-if="tabIndex != 2" src="@/static/tabbar/mine.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 2" src="@/static/tabbar/mine_select.png" mode="widthFix"></image>
					<text :class="[
								tabIndex == 2 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">公司</text>
				</view>
			</gui-flex>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		getCompanyInfoByNum
	} from '@/api/company.js';
	import {
		getUserConsumerInfo,
		indexUserMessageNum
	} from '@/api/user.js';
	
	const guipage = ref(null);
	
	const companyInfo = ref({
		zpNum: 0,
		gzNum: 0,
		tdNum: 0
	})
	const userNumInfo = ref({
		scNum: 0,
		tdNum: 0,
		gzNum: 0
	})
	
	const userTzNum = ref(0)
	const store = useUserStore()
	const {
		isHideTabbar,
		userInfo,
		isLogin,
		addressInfo
	} = storeToRefs(store)
	
	const $u = reactive(inject('$u'))
	const navHeight = ref(getApp().globalData.navHeight)
	
	const tabIndex = ref(2)
	
	const navChange = (index) => {
		// tabIndex.value = index;
		if(index == 0) {
			$u.to(`/pages/index/index`, 'switchTab')
		}else if(index == 1) {
			$u.to(`/pages/recruit/recruit`, 'switchTab')
		}
	}
	onLoad(() => {
		reload();
	})
	const reload = async(isReload = false) => {
		if(isLogin.value) {
			await store.getUserFun(true);
			if(isHideTabbar.value) {
				loadNum(isReload);
			}else {
				loadUserNum(isReload);
			}
		}else {
			return;
		}
	}
	const loadNum = (isReload) => {
		getCompanyInfoByNum().then(res => {
			if(res.code == 200) {
				companyInfo.value = res.data;
			}
			if (isReload) {
				guipage.value.endReload();
			}
		})
	}
	
	const loadUserNum = (isReload) => {
		getUserConsumerInfo().then(res => {
			if(res.code == 200) {
				userNumInfo.value = res.data;
			}
			if (isReload) {
				guipage.value.endReload();
			}
		})
		indexUserMessageNum().then(res => {
			if(res.code == 200) {
				if(res.data > 99) {
					userTzNum.value = '99+';
				}else {
					userTzNum.value = res.data;
				}
				
			}
		})
	}
	
	const logout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出当前账号吗？',
			success: (res) => {
				if (res.confirm) {
					console.log('用户点击确定');
					store.logOut();
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	
	const goLogin = () => {
		if(!isLogin.value) {
			$u.to(`/pages/login/login`)
		}
	}
</script>

<style lang="scss">
	.header {
		position: relative;
		padding-bottom: 75rpx;

		.head-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 596rpx;
		}

		.header-con {
			.head-img {
				padding-left: 52rpx;

				.headerImg {
					position: relative;
					width: 144rpx;
					height: 144rpx;
					border-radius: 144rpx;
					margin-right: 18rpx;

					.sex {
						position: absolute;
						right: 10rpx;
						bottom: 0;
						width: 37rpx;
					}
				}

				.location {
					margin-top: 16rpx;
				}

			}

			.num-box {
				margin-top: 40rpx;

				.f36 {
					margin-bottom: 5rpx;
				}
			}

			.head-tool-box {
				position: relative;
				top: 50rpx;
				width: 690rpx;
				height: 190rpx;
				margin: 0 auto;
				border-radius: 20rpx;
				box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.05);

				.item {
					image {
						height: 50rpx;
						margin-bottom: 22rpx;
					}
				}
			}
		}
	}

	.seavice {
		width: 690rpx;
		margin: 0 auto;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;

		.title {
			padding: 34rpx 0 19rpx 31rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		}

		.tool {
			padding-bottom: 140rpx;

			.item {
				width: 172rpx;
				padding-top: 46rpx;
				position: relative;
				
				.demo-badge {
					position: absolute;
					right: 40rpx;
					top: 30rpx;
				}

				image {
					height: 55rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}
</style>